<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标悬浮特效</title>
    <meta name="keywords" content="鼠标，悬浮，特效">
    <meta name="description" content="鼠标悬浮特效网站">
    <style>
        .box{
            width: 846px;
            height: 300px;
            margin: 25px auto;
        }
        .box .item{
            float: left;
            width: 400px;
            height: 300px;
        }
        .box .item img{
            position: absolute;
            /*display: block;*/
            width: 400px;
            height: 300px;
            z-index: 1;
            transition: 0.4s;
            /*transform: scale(0.4); /*放大到0.4倍*/*/
        }
        .box .item:hover img{
            transform: scale(0.4);
        }
        .backbox{
            position: absolute;
            width: 400px;
            height: 300px;
            background-color: #2c3f52;
            transition: 0.4s;
            transform: scale(0.4);
            color: #fff;
        }
        .box .item:hover .backbox{
            transform: scale(1);
        }
        .box .item .backbox h3{
            margin-top: 20px;
            padding-left: 20px;
        }
        .box .item .backbox p{
            position: absolute;
            bottom: 2px;
            right: 10px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">
            <img src="images/1.png" alt="camera">
            <div class="backbox">
                <h3>Setting</h3>
                <p>By Hang</p>
            </div>
        </div>
        <div class="item">
            <img src="images/2.png" alt="camera">
            <div class="backbox">
                <h3>Setting</h3>
                <p>By Hang</p>
            </div>
        </div>
        <div class="item">
            <img src="images/3.png" alt="camera">
            <div class="backbox">
                <h3>Setting</h3>
                <p>By Hang</p>
            </div>
        </div>
        <div class="item">
            <img src="images/4.png" alt="camera">
            <div class="backbox">
                <h3>Setting</h3>
                <p>By Hang</p>
            </div>
        </div>
        <div class="item">
            <img src="images/5.png" alt="camera">
            <div class="backbox">
                <h3>Setting</h3>
                <p>By Hang</p>
            </div>
        </div>
        <div class="item">
            <img src="images/6.png" alt="camera">
            <div class="backbox">
                <h3>Setting</h3>
                <p>By Hang</p>
            </div>
        </div>
    </div>
</body>
</html>